<template>
    <a-layout class="departmentManageRoot">

        <a-layout-content style="flex-direction: column;display: flex;">

            <PageHeader>
                <a-button v-has-permission="'department:add'" type="primary" @click="addVisible=true">添加部门</a-button>
            </PageHeader>
            <!--<div style="background: #fff;margin-top: 1px;padding-left: 18px;padding-right: 18px; height: 50px;display: flex;align-items: center">-->
                <!--<h2 style="flex: 1">部门管理</h2>-->
                <!--<a-button v-has-button-permission="'department:add'" type="primary" @click="addVisible=true">添加部门</a-button>-->
            <!--</div>-->
            <div ref="tableWrapper"  style="flex: 1;overflow-y: auto">

            <a-table
                    :pagination="false"
                    :scroll="{ y : (this.$refs.tableWrapper ? this.$refs.tableWrapper.offsetHeight - 120:0  ) }"
                        :rowKey="(record) => {return record.department.departmentId}"
                    :columns="columns" :dataSource="tableData"    >


                <span slot="departmentId" slot-scope="text, record" class="oper">

                    <a-icon type="edit" title="编辑" v-has-permission="'department:edit'"   @click="()=>{editVisible = true;curDepartmentId=text}"/>

                    <a-popconfirm title="删除部门会同时删除下面的所有子部门,确认删除此部门吗" v-has-permission="'department:delete'" @confirm="deleteDepartment(text)" okText="确认" cancelText="取消">
                        <a-icon  theme="twoTone" twoToneColor="#f50" type="delete" title="删除" />
                    </a-popconfirm>

                </span>

            </a-table>

            </div>

            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="添加部门"
                    @close="addVisible=false"
                    :visible="addVisible"
            >

                <DepartmentAdd @ok="addVisible=false;loadDepartments()" ref="addDep"></DepartmentAdd>

                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.addDep.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>


            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="修改部门"
                    @close="editVisible=false"
                    :visible="editVisible">

                <DepartmentEdit v-model="curDepartmentId" ref="editDept" @ok="editVisible=false;loadDepartments()"></DepartmentEdit>

                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.editDept.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>


        </a-layout-content>


    </a-layout>




</template>

<script>


    import DepartmentAdd from './DepartmentAdd';
    import DepartmentEdit from './DepartmentEdit'

    import {
        Layout,
        Form, DatePicker,Input,Button,Icon,Radio,TreeSelect,
        Pagination,
        Popconfirm,
        Table,
        Drawer,message

    } from 'ant-design-vue';


    export default {
        name: "DepartmentManage",
        components:{
            DepartmentAdd,
            DepartmentEdit,
            ALayout:Layout,
            ALayoutSider:Layout.Sider,
            ALayoutContent:Layout.Content,
            ALayoutHeader:Layout.Header,
            APagination:Pagination,
            ARadioButton:Radio.Button,
            ARadioGroup:Radio.Group,
            AFormItem:Form.Item,
            AForm:Form,
            ADatePicker:DatePicker,
            AInput:Input,
            AButton:Button,
            AIcon:Icon,
            ATreeSelect:TreeSelect,
            APopconfirm:Popconfirm,
            ATable:Table,
            ADrawer:Drawer
        },
        data(){
            return {
                addVisible:false,
                editVisible:false,
                permissionVisible:false,
                curDepartmentId:'',
                routes:[],
                columns:[{
                    title:'部门名称',
                    dataIndex:'department.departmentName',
                    width:'20%'
                    },
                    {
                        title:'部门描述',
                        dataIndex:'department.departmentDesc',
                        width:'20%'
                    },
                    {
                        title:'创建时间',
                        dataIndex:'department.departmentCreatetime',
                        width:'10%'
                    },
                    {
                        title:'操作',
                        width:'20%',
                        dataIndex:'department.departmentId',
                        scopedSlots:{customRender:'departmentId'}
                    }
                ],
                tableData:[]
            };
        },
        mounted(){
            this.loadDepartments();
        },
        methods:{

            loadDepartments(){
                this.$axios.get("/auth/department/getDepartmentList")
                    .then(d=>{
                        if(d.data.status == 0){
                            let data = d.data.data;
                            this.processEmptyChild(data);
                            this.tableData = data;
                        }

                    })
                    .catch(e=>{

                        console.log(e);
                    })
            },
            processEmptyChild(data){
                //把空的children去掉，前端框架有bug 没办法
                for(let d of data){
                    if(d.children.length == 0){
                        d.children = undefined;
                    }else{
                        this.processEmptyChild(d.children);
                    }
                }
            },
            deleteDepartment(did){

                this.$axios.delete("/auth/department/deleteDepartment?departmentId=" + did)
                    .then(d=>{
                        if(d.data.status == 0){
                            message.success("删除成功");
                            this.loadDepartments();
                        }else{
                            message.error(d.data.message);
                        }
                    })
                    .catch(e=>{
                        message.error("删除失败,未知错误");
                    })
            }

        }
    }
</script>

<style scoped>
    .departmentManageRoot {

    }
    .oper >>> .anticon{

        margin-right: 16px;
        font-size: 20px;
        cursor: pointer;
    }

    .drawerBottomWrapper{
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius:0 0 4px 4px;
    }

    >>>.ant-table-header{
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
        overflow: hidden !important;
    }
    >>>.ant-table-body{
        overflow-y: auto !important;
    }


</style>